<template>
  <bm-overlay
    ref="customOverlay"
    class="detail"
    pane="labelPane"
    @draw="draw">
    <slot></slot>
  </bm-overlay>
</template>

<script>
export default {
  props: ['text', 'position', 'active'],
  watch: {
    position: {
      handler () {
        this.$refs.customOverlay.reload()
      },
      deep: true
    }
  },
  methods: {
    draw ({el, BMap, map}) {
      const {lng, lat} = this.position
      const pixel = map.pointToOverlayPixel(new BMap.Point(lng, lat))
      el.style.left = pixel.x - 200 + 'px'
      el.style.top = pixel.y - 180 + 'px' // 详情气泡底端距房源气泡顶端的距离，可自己调整
    }
  }
}
</script>

<style lang="stylus" scoped>
  .detail
    z-index: 9
    transition: background-color .15s ease-in-out
    width: 400px
    height: 140px
    padding: 20px
    box-shadow: 0 0 10px #bbb
    background-color: #fff
    color: #fff
    text-align: center
    position: absolute
    font-size: 12px
    line-height: 13px
    border-radius: 5px
    box-sizing: border-box
    div
      display: flex
      flex-wrap: wrap
      overflow: hidden
      text-overflow: ellipsis
      white-space: nowrap
      justify-content: space-between
      p
        overflow: hidden
        text-overflow: ellipsis
        white-space: nowrap
        width: 100%
        text-align: center
    &:after
      content: ''
      display: block
      position: absolute
      left: 50%
      bottom: -20px
      width: 0
      height: 0
      margin-left: -10px
      border: 10px solid transparent
      border-top-color: #fff
</style>